/*
* 用户注册数据venn图
* @Author: Li Yujie
* @Date: 2020-12-10
*/
<template>
    <div
        class="container"
    >
        <p class="container-title">{{ title }}</p>
        <div
            class="container-wrap"
            v-show="is_data"
            @mousemove="handleMousemove($event)"
        >
            <div
                id="venn"
                class="dataChartsSex"
                ref="venn"
            />

            <div
                v-show="isTooltipShow"
                class="tooltip"
                ref="tooltip"
                :style="{left: left, top: top}"
            >
                {{ desc }}
            </div>
            <div
                class="data-list"
                :style="{left: `${width * 0.5}px`}"
            >
                <div class="data-item">
                    <div class="item-title">总注册人数：</div>
                    <div class="item-content">{{ chartData.student_count }}人</div>
                </div>
                <div class="data-item">
                    <div class="item-title">完善密码人数：</div>
                    <div class="item-content">{{ chartData.pwd_user_count }}人</div>
                </div>
                <div class="data-item">
                    <div class="item-title">绑定微信人数：</div>
                    <div class="item-content">{{ chartData.wx_user_count }}人</div>
                </div>
                <div class="data-item">
                    <div class="item-title">绑定QQ人数：</div>
                    <div class="item-content">{{ chartData.qq_user_count }}人</div>
                </div>
                <div class="data-item">
                    <div class="item-title">绑定微信和完善密码人数：</div>
                    <div class="item-content">{{ chartData.wx_pwd_user_count }}人</div>
                </div>
                <div class="data-item">
                    <div class="item-title">绑定QQ和完善密码人数：</div>
                    <div class="item-content">{{ chartData.qq_pwd_user_count }}人</div>
                </div>
                <div class="data-item">
                    <div class="item-title">绑定微信和绑定QQ人数：</div>
                    <div class="item-content">{{ chartData.wx_qq_user_count }}人</div>
                </div>
                <div class="data-item">
                    <div class="item-title">三者均完善的人数：</div>
                    <div class="item-content">{{ chartData.wx_qq_pwd_user_count }}人</div>
                </div>
            </div>
        </div>
        <div
            class="container-wrap"
            v-show="!is_data"
        >
            暂无数据
        </div>
    </div>
</template>

<script>
import * as d3 from 'd3/build/d3.min';
import { VennDiagram, sortAreas } from 'venn.js';

export default {
    data () {
        return {
            //是否有数据
            is_data: true,
            left: 0,
            top: 0,
            isTooltipShow: false,
            desc: '',
            chartData: {},
            width: 0,
            sets: []
        };
    },
    props: {
        title: {
            type: String,
            default: ()=>{}
        },
        data: {
            type: Object,
            default: ()=>{}
        }
    },
    watch: {
        //父组件值改变自组件内容不更新解决
        data : {
            handler: function(value) {
                this.chartData = value;
                let arr = Object.values(value).filter((item) => {
                    if (item !== 0) {
                        return true;
                    }
                });

                this.is_data = arr.length !== 0;
                this.sets = [
                    {
                        sets: ['完善密码'],
                        size: value.pwd_user_count
                    },
                    {
                        sets: ['绑定微信'],
                        size: value.wx_user_count
                    },
                    {
                        sets: ['绑定QQ'],
                        size: value.qq_user_count
                    },
                    {
                        sets: ['绑定微信', '完善密码'],
                        size: value.wx_pwd_user_count
                    },
                    {
                        sets: ['绑定QQ', '完善密码'],
                        size: value.qq_pwd_user_count
                    },
                    {
                        sets: ['绑定微信', '绑定QQ'],
                        size: value.wx_qq_user_count
                    },
                    {
                        sets: ['绑定微信', '绑定QQ', '完善密码'],
                        size: value.wx_qq_pwd_user_count
                    }
                ];
                this.init();
            },
            deep: true
        }
    },
    mounted () {
        this.width = this.$refs.venn.clientWidth;

        window.onresize = window.onload = e => {
            this.width = this.$refs.venn.clientWidth;
            this.init();
        };
    },
    methods: {

        /**
         * 初始化
         */
        init () {
            const sets = this.sets;

            // eslint-disable-next-line new-cap
            let chart = VennDiagram()
                .width(this.width * 0.5)
                .height(241);

            let div = d3.select('#venn');
            let _this = this;
            // let colours = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622'];

            div.datum(sets).call(chart);

            /*div.selectAll('path')
                // 透明度
                .style('stroke-opacity', 0);*/

            // 文字颜色
            // d3.selectAll("#venn text").style("fill", "white");

            div.selectAll('g')
                .on('mouseover', function (d, i) {
                    sortAreas(div, d);

                    let text = d.sets.join();
                    // highlight the current path
                    let selection = d3.select(this);

                    selection.select('path')
                        .style('fill-opacity', d.sets.length === 1 ? 0.4 : 0.3)
                        .style('stroke-opacity', 1);

                    _this.desc = `${text}的人数：${d.size}`;
                    _this.isTooltipShow = true;
                })

                /*.on('mousemove', function () {
                    tooltip.style('left', (d3.event.pageX) + 'px')
                        .style('top', (d3.event.pageY - 28) + 'px');
                })*/

                .on('mouseout', function (d, i) {
                    // tooltip.transition().duration(400).style('opacity', 0);
                    let selection = d3.select(this);

                    _this.isTooltipShow = false;

                    selection.select('path')
                        .style('fill-opacity', d.sets.length === 1 ? 0.25 : 0.0)
                        .style('stroke-opacity', 0);
                });
        },

        /**
         * 鼠标移动显示tooltip
         * @param e
         */
        handleMousemove (e) {
            this.left = e.offsetX + 15 + 'px';
            this.top = e.offsetY + 15 + 'px';
        },
    }
};
</script>

<style lang="less" scoped>
.container {
    min-height: 287px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    .container-title {
        width: 100%;
        height: 48px;
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #000000;
        position: relative;
        &::after{
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 84%;
            height: 1px;
            background: #f4f4f4;
        }
    }
    .container-wrap {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        color: #909399;
        position: relative;
        .tooltip {
            position: absolute;
            text-align: center;
            background: rgba(50,50,50,0.7);
            color: #fff;
            font-size: 14px;
            border-style: solid;
            white-space: nowrap;
            z-index: 9999999;
            border-width: 0;
            border-color: rgb(51, 51, 51);
            border-radius: 4px;
            font: 14px / 21px "Microsoft YaHei";
            padding: 5px;
            left: 114px;
            top: 154px;
            pointer-events: none;
        }
        #dataChartsSex{
            width: 100%;
            height: 100%;
        }
        .dataChartsSex {
            width: 100%;
            height: 100%;
        }
        .data-list {
            display: flex;
            flex-direction: column;
            position: absolute;
            right: 0;
            font-size: 12px;
            .data-item {
                display: flex;
                margin: 8px 0;
            }
        }
    }
}
.container2{
    width: calc(100% / 2 - 8px);
}
.container2{
    width: calc(100% / 3 - 8px);
}
</style>
